import { Component, OnInit } from '@angular/core';
import { EventService, EventMessage, EventSource } from 'src/app/services/event.service';
import { Settings } from 'src/app/entity/TT';
import { SettingsComponent } from '../settings.component';


export class ThemeItem {

    active: boolean;
    backgroundColor: string;

}

@Component({
  selector: 'app-theme',
  templateUrl: './theme.component.html',
  styleUrls: ['./theme.component.scss']
})
export class ThemeComponent implements OnInit {



  colors = [
      '#535353',
			'#4274ff',
			'#9d0a16',
			'#307726',
			'#f6be4f',
			'#7519dd',
  ];

  themes: ThemeItem[] = [];

  constructor(private eventService: EventService,
    private settingsComponent: SettingsComponent) {
    this.colors.forEach(c => {
      const item: ThemeItem = {
        active: false,
        backgroundColor: c
      };
      this.themes.push(item);
    });

 

  }

  ngOnInit() {
    setTimeout(()=>{
      const s = this.settingsComponent.set;
      if(s){
          const the = this.themes.find(t => t.backgroundColor === s.themeColor)
          this.onClick(the)
        }
      },200)
  }

  onClick(item: ThemeItem) {
    if(!item)return;

    for (let t of this.themes){
      t.active = false;
    }

    item.active = !item.active;
    this.eventService.sendEvent(EventSource.SET_THEME_VALUE, item.backgroundColor);
  }

}
